<template>
  <el-form :model="form" label-width="auto" style="max-width: 600px">
    <el-form-item label="用户名:">
      <el-input v-model="form.userName" />
    </el-form-item>
    <el-form-item label="所在地址:">
      <el-select v-model="form.provinceId" style="width: 165px;" placeholder="请选择"
        @change="getCityList(); getCountyList()" clearable>
        <el-option v-for="item in provinceList" :label="item.provinceName" :value="item.provinceId" />
      </el-select>&nbsp;&nbsp;&nbsp;&nbsp;

      <el-select v-model="form.cityId" style="width: 165px;" placeholder="请选择" @change="getCountyList()" clearable>
        <el-option v-for="item in cityList" :label="item.cityName" :value="item.cityId" />
      </el-select>&nbsp;&nbsp;&nbsp;&nbsp;

      <el-select v-model="form.countyId" style="width: 165px;" placeholder="请选择" clearable>
        <el-option v-for="item in countyList" :label="item.countyName" :value="item.countyId" />
      </el-select>
    </el-form-item>
    <el-form-item label="性别:">
      <el-radio-group v-model="form.userSex">
        <el-radio :value="true">男</el-radio>
        <el-radio :value="false">女</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="详细地址:">
      <el-input v-model="form.userAddress" />
    </el-form-item>
    <el-form-item label="部门:">
      <el-select v-model="form.departmentId" placeholder="请选择" >
        <el-option v-for="item in options" :label="item.label" :value="item.value" />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="addUserInfo()">保存</el-button>
    </el-form-item>
  </el-form>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios'
import { useRoute, useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
const route = useRoute();
const router = useRouter();
const form = reactive({
  userName: '',
  password: "12345678",
  userSex: '',
  userAddress: '',
  provinceId: '',
  cityId: '',
  countyId: '',
  departmentId:'',
  createName: localStorage.getItem("userName"),
  createTime: new Date(),
  isDeleted: false
})

//获取省份
const provinceList = ref([])
const getProvinceList = () => {
  axios.get("/api/Province/GetProvinceinfo")
    .then(res => {
      provinceList.value = res.data.data
    })
    .catch(err => {
      console.log(err);
    })
}
//获取城市
const cityList = ref([])
const getCityList = () => {
  form.cityId = ''
  axios.get("/api/City/GetCityinfo?provinceId=" + (form.provinceId || 0))
    .then(res => {
      cityList.value = res.data.data
    })
    .catch(err => {
      console.log(err);
    })
}
//获取县城
const countyList = ref([])
const getCountyList = () => {
  form.countyId = ''
  axios.get("/api/County/GetCountyinfo?cityId=" + (form.cityId || 0))
    .then(res => {
      countyList.value = res.data.data
    })
    .catch(err => {
      console.log(err);
    })
}

//添加
const addUserInfo = () => {
  if (form.userName == "") {
    ElMessage.error("用户名不能为空");
    return;
  }
  if (form.userAddress == "") {
    ElMessage.error("详细地址不能为空");
    return;
  }
  axios.post("/api/UserInfo/Create", form)
    .then(res => {
      if (res.data.code == 0) {
        ElMessage.success("添加成功");
        router.push({
          name: 'UserRoleList'
        })
      }
      else {
        ElMessage.error("添加失败");
      }
    })
}

const options = ref([])
const getDepartment=()=>{
  options.value.push(
        {value:1,label:"IT信息部"},
        {value:2,label:"人力资源部"},
        {value:3,label:"财务部"},
        {value:4,label:"销售部"},
        {value:5,label:"行政部"}
    )
}


onMounted(() => {
  getProvinceList();
  getDepartment();
})
</script>